<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/dsb.css">

    <style>
        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 8px;
            line-height: 1.42857143;
            vertical-align: middle;
            border-top: 1px solid #ddd;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Help</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active" ><a href="/Lab_list/">实验室社列表</a></li>
                <li  ><a href="/Assets_list/">物资列表</a></li>
                <li ><a href="/User_list/">用户列表</a></li>
            </ul>

        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">


            <h2 class="sub-header">展示实验室列表</h2>
            <a href="/Lab_add/" class="btn btn-sm btn-primary">添加</a>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>实验室</th>
                        <th>层数</th>
                        <th>房间号</th>
                        <th>负责人姓名</th>
                        <th>操作</th>

                    </tr>

                    </thead>

                    <tbody>
                    {% for lab in k1 %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ lab.l_name }}</td>
                            <td>{{ lab.floor }}</td>
                            <td>{{ lab.room }}</td>
                            <td>{{ lab.leader.name }}</td>
                            <td>
{#                                <a  class="btn btn-danger btn-sm" href="/Lab_del/?id={{ lab.pk }}">删除</a>#}
                                <button class="btn btn-danger btn-sm" value="/Lab_del/?id={{ lab.pk }}">删除</button>
                                <a class="btn btn-success btn-sm" href="/Lab_edit/?id={{ lab.pk }}">修改</a>
                            </td>
                        </tr>
                    {% endfor %}

                    </tbody>

                </table>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js"></script>
    <script>

        $('.btn-danger').click(function () {
            swal({
                title: "是否确定删除?",
                text: "删除后无法恢复",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {

                    $.ajax({
                        url: $(this).val(),
                        success: (res) => {

                            if (res) {
                                //  在前端删除数据
                                swal("Poof! Your imaginary file has been deleted!", {
                                    icon: "success",
                                });
                                $(this).parent().parent().remove()
                            } else {
                                swal("Your imaginary file is safe!");
                            }
                        }
                    })

                } else {
                    swal("Your imaginary file is safe!");
                }
            });


        })


    </script>

</body>


</html>